/**
 * 综合素质 信息展示
 */
import { Card, Col, Row, Spin } from "antd";
import { WeaProgress } from "ecCom";
import { inject, observer } from "mobx-react";
import React from "react";
import { i18n } from "../../../public/i18n";

@inject("individualMainStore")
@observer
export default class ComplexQualityCardCom extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { individualMainStore: store } = this.props;
    const {
      personalIndexData: { basicInfo: data, assessItems: items },
      loadings: { userInfoLoading },
    } = store;
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@fp0omj`} spinning={false}>
        <div className="classification-score-container">
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@naa7ew`} justify="space-around" gutter={16} className="complex-score-wrapper">
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gn8pvn`} xs={24} sm={24} md={12} lg={12} xl={12}>
            <div className="left-wrapper">
              <span className="title">{i18n.label.complxQualityScore()}</span>{" "}
              <span className="goal-span" style={{ color: data.goalColor }}>
                {data.totalScore}
              </span>
            </div>
            </Col>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@alxn6g`} xs={24} sm={24} md={12} lg={12} xl={12}>
            <div  className="right-wrapper">
              <span className="title">{i18n.label.overTheSamePost()}</span>{" "}
              <span className="percent-span" style={{ color: data.percentColor }}>
                {data.percent}
              </span>
            </div>
            </Col>
          </Row>
          
          <div className="classification-score-wrapper">
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nunpgw`} justify="space-around" style={{ padding: "16px" }} gutter={16}>
              {items &&
                items.length > 0 &&
                items.map((item, index) => {
                  return (
                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cg7xqp@${index}`} xs={24} sm={24} md={12} lg={8} xl={8}>
                      <Card ecId={`${this && this.props && this.props.ecId || ''}_Card@ja2455@${index}`} hoverable>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@6pvtrl@${index}`}>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ykowv3@${index}`} span={24}>
                            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@pkagtx@${index}`}
                              percent={item.score}
                              strokeColor={item.scoreColor}
                              format={(percent) => `${percent}分`}
                            />
                          </Col>
                        </Row>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zpe9ck@${index}`} gutter={16} style={{ marginTop: "24px" }}>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@o1hru9@${index}`} span={24}>
                            <span
                              className="icon-span"
                              style={{ color: item.scoreColor }}
                            >
                              <i className={item.icon} />
                            </span>
                            <span className="title-span">{item.type}</span>
                          </Col>
                        </Row>
                      </Card>
                    </Col>
                  );
                })}
            </Row>
          </div>
        </div>
      </Spin>
    );
  }
}
